<template>
  <div>
    <input v-model="searchVal3.a.b.c" type="text" placeholder="搜索">
    <input v-model="searchVal3.a.b.d" type="text" placeholder="搜索">
    <input v-model="searchVal4" type="text" placeholder="搜索">
    <button @click="stop">停止</button>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, computed, watch, watchEffect} from 'vue'

let searchVal = ref<string>('')
let searchVal2 = ref<string>('')
let searchVal4 = ref<string>('222')

let searchVal3 = reactive({
  a: {
    b: {
      c: 123,
      d: 456
    }
  }
})

const  stop = () => stopsss()

// 停止
const stopsss =  watchEffect((inback) => {
  console.log('searchVal4===', searchVal4.value)
  inback(() => {
    console.log('before')
  })
})

// 监听某一个 值需要使用监听函数
watch(() => searchVal3.a.b.c, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  immediate: true, // 立即执行

})

// watch(searchVal3, (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// })

// watch([searchVal, searchVal2], (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// })

</script>

<style scoped>
</style>
